* {
    box-sizing: border-box;
}

/*背景图片*/
body {
    background: url(../static/images/背景图7.jpg);
}

/*链接点击变色*/
a:link {
    color: #0c0c0c;
}

a:visited {
    color: #000000;
}

a:hover {
    color: #ff4d00;
}

a:active {
    color: #0000FF;
}

/* 头部标题 */
.top {
    margin-top: -60px;
    text-align: left;
    color: rgba(0, 0, 0, 0.8);
    /*font-family: YouYuan;*/
}
.mp4{
width: 200px;
height: 150px;
}
.second{
width: 100%; 
height: 350px;
}
.header{
 position: fixed;
 width: 100%;
 top: 0;
 left: 0;
 right: 0;
 height: 100px;
 z-index: 999;
 display: flex;
 flex-direction: row;
 align-items: center;
  justify-content: center;
 align-items: baseline;
 background-color: aliceblue;
 line-height: 100px;
}
.cass{
height: 88px;
width: 88px;
position: absolute;
left: 390px;
border-radius: 50%;
}

/* 导航条 */
/* .nav {
    background-color: rgba(255, 255, 255, 0.8);
}*/

/* 导航条链接 */
.nav a {
    /* 完成下行生成行内块状元素的代码 */
    display: inline;
    color: rgba(0, 0, 0, 0.8);
    padding: 20px;
    text-decoration: none;
}/*背景*/
/* .mp4{
width: 100%;
height: 100px;
background-color: #4c2dd2;
position: absolute;
}*/

/* 链接颜色修改 */
.nav a:hover {
    color: rgb(68, 28, 28);
}

.main {
    margin-top: 20px;
}

/* 创建两列 */
/* Left column */
.left {
    float:left;     
    width: 75%;
    margin-right: 20px;
    margin-bottom: 20px;
}

/* 右侧栏 */
.right {
    /* 完成下行右浮动的代码 */
    float: left;
    width: 20%;
    margin-right: 5px;
    margin-bottom: 20px;
}

/* 个人相册 */
.imgset {
    background-color: rgba(255, 255, 255, 0.8);
    width: 100%;
    float: left;
    border-radius: 15px;
    padding: 10px;
}

/* 个人简介文字背景 */
.bj {
    background-color: rgba(255, 255, 255, 0.8);
    width: 100%;
    border-radius: 15px;
    padding: 10px;
}

/* 个人简介头像 */
.sss {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    float: right;
    margin-top: -50px;
}

/*编程作品的大小*/
.bj iframe {
    width: 30%;
    height: 272%;
}
/* 相册图片大小 */
.herder img{
    width: 220px;
    height: 207px;
    padding: 10px;
}

/* 标题居中及背景 */
h2 {
    text-align: center;
    font-family: KaiTi;
}

/*缩进字符*/
.indent {
    text-indent: 30px;
}

audio {
    width: 100%;
}
/*背景*/
body{
margin: 0;
padding: 0;
font-family: "montserrat";
background-image: linear-gradient(125deg,#2c3e50,#f04c0b89,#2980b9,#e74d3cd1,#8e44ad);
background-size: 400%;
animation: bganimation 15s infinite;
}

/*.text{
color: white;
text-align: center;
text-transform: uppercase;
margin: 300px 0;
font-size: 22px;
}*/

@keyframes bganimation {
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}

/*背景*/
/*顶头头像*/}
/*菜单栏*/
.menus{
position: relative;
width: 350px;
height: 500px;

}
.buttom{
margin: 60px 0;
color: #fff;
}
.list{

letter-spacing: 2px;
font: 600 17px "";
padding: 16px 52px;
transition: 0.3s;
}
.list::after{
content: "";
position: absolute;
left: 20px;
margin-top: -22px;
display: block;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
}
.buttom>li:hover{
background-color:rgb(158, 168, 171);
}
.list ul{
width: 0;
height: 450px;
padding: 60px 0;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
background-color: rgb(143, 150, 152);
transform: .3s;
}
.list ul li {
padding: 16px 24px;
transform: .3s;
}
.list:hover ul{
width: 250px;
position: absolute;
left: 350px;
border-radius: 10px;
text-align: center;
}
.list ul li:hover{
background-color: rgb(191, 235, 247);
} 
/*相册*/
.box{
    width: 1200px;
    height: 550px;
    display: flex;
    flex-direction: row;
    -webkit-box-reflect: below 15px
    -webklit-linear-gradient(transparent 50%,rgb(255,255,255,0.3));
}
.img-box{
    width: 100px;
    height: 550px;
    overflow: hidden;
    transition: 0.3s;
}
.img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% 20%;
}
.img-box:nth-child(5){
    width: 800px;
}
.img-box:hover{
    width: 800px;
}
.img-box:hover ~ .img-box:nth-child(5){
    width: 100px;
}
.imgset{
    margin: auto;
    width: 1260px;
    height: 630px;
    display: flex;   
}
.grid1 img{
    width: 300px;
    height: 300px;
    margin-left: 300px;
    margin-top: 150px;
    
}


/*开箱动画*/
.boxas{
    height: 200px;
    margin-top: 110px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transform-style: preserve-3d;
perspective: 1000px;
transform: rotateX(-20deg);
}
.sides{
position: absolute;
width: 200px;
height: 200px;
background-color: #c09551;
border: 1px solid #e4c084;
}
.fronts{
transform: translateZ(100px)
}
.backs{
transform: translateZ(-100px) rotateY(180deg);

} 
.lefts{
transform: translateX(-100px) rotateY(-90deg);

}
.rights{
transform: translateX(100px) rotateY(90deg);

}
.tops{
transform: translateY(-100px) rotateX(90deg);
background-color: transparent;
transform-style: preserve-3d;
}
.tops div{
background-color: #c09551;
position: absolute;
top: 0;
width: 50%;
height: 100%;
border: 1px solid #e4c084;
transition: 0.5s;s

}
.tops .tl{
left: 0;
transform-origin: left;
}
.tops .tr{
right: 0;
transform-origin: right;
}
.bottoms{
transform: translateY(100px) rotateX(-90deg);
box-shadow: 5px -5px 15px rgba(0, 0, 0, 4);
}
.boxas:hover .tops .tl{
transform: rotateY(-135deg);
}
.boxas:hover .tops .tr{
transform: rotateY(135deg);
}
.boxas .textaz{
width: 200px;
text-align: center;
font-size: 30px;
font-weight: bold;
transition: 0.8s;

}
.boxas:hover .textaz{
transform: translateY(-180px);

}
.touming{
opacity: 0.5;
width: 200px;
height: 192px;
border-radius: 50%;
}
.xiangce{
width: 500px;
height: 100px;
}
.xiao{
width: 290px;
height: 260px;
}
.cssd{
background-color: rgba(255, 255, 255, 0.8);
    width: 100%;
    float: left;
    border-radius: 15px;
    padding: 10px;
}
/*轮播图*/
ul.slides {
position: relative;
width: 700px;
height: 400px;
list-style: none;
margin: 0;
padding: 0;
background-color: #eee;
overflow: hidden;
background: 100%;
}
.index_word2{
display: flex;
justify-content: center;
}
li.slide {
margin: 0;
padding: 0;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: Helvetica;
font-size: 120px;
color: #fff;
transition: .5s transform ease-in-out;
}

input[type="radio"] {
position: relative;
z-index: 100;
display: none;
}

.controls-visible {
position: absolute;
width: 100%;
bottom: 12px;
text-align: center;
}

.controls-visible label {
display: inline-block;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
margin: 0 3px;
border: 2px solid #fff;
}

.slide:nth-of-type(1) {
background-image: url(http://codelover.club/stutasks/userID_260/currNo_7/个人主页/01.jpg);
background-size: 700px 400px;
}

.slide:nth-of-type(2) {
background-image: url(http://codelover.club/stutasks/userID_260/currNo_7/个人主页/06.jpg) ;
background-size: 700px 400px;
left: 100%;
}

.slide:nth-of-type(3) {
background-image: url(http://codelover.club/stutasks/userID_260/currNo_7/个人主页/02.jpg);
background-size: 700px 400px;
left: 200%;
}

.slide:nth-of-type(4) {
background-image: url(http://codelover.club/stutasks/userID_260/currNo_7/个人主页/03.jpg);
background-size: 700px 400px;
left: 300%;
}

.slide:nth-of-type(5) {
background-image: url(http://codelover.club/stutasks/userID_260/currNo_7/个人主页/05.jpg);
background-size: 700px 400px;
left: 400%;
}



.slides input[type="radio"]:nth-of-type(1):checked~.controls-visible label:nth-of-type(1) {
background-color: rgb(36, 152, 188);
}

.slides input[type="radio"]:nth-of-type(2):checked~.controls-visible label:nth-of-type(2) {
background-color: rgb(227, 241, 138);
}

.slides input[type="radio"]:nth-of-type(3):checked~.controls-visible label:nth-of-type(3) {
background-color: rgb(212, 105, 155);
}

.slides input[type="radio"]:nth-of-type(4):checked~.controls-visible label:nth-of-type(4) {
background-color: rgb(105, 212, 137);
}

.slides input[type="radio"]:nth-of-type(5):checked~.controls-visible label:nth-of-type(5) {
background-color: rgb(198, 92, 47);
}

.slides input[type="radio"]:nth-of-type(1):checked~.slide {
transform: translatex(0%);
}

.slides input[type="radio"]:nth-of-type(2):checked~.slide {
transform: translatex(-100%);
}

.slides input[type="radio"]:nth-of-type(3):checked~.slide {
transform: translatex(-200%);
}

.slides input[type="radio"]:nth-of-type(4):checked~.slide {
transform: translatex(-300%);
}

.slides input[type="radio"]:nth-of-type(5):checked~.slide {
transform: translatex(-400%);
}

.navigator {
position: absolute;
top: 50%;
transform: translatey(-50%);
width: 100%;
z-index: 100;
padding: 0 20px;
display: flex;
justify-content: space-between;
box-sizing: border-box;
display: none;
}

.navigator i {
font-size: 32px;

}

.slides input[type="radio"]:nth-of-type(1):checked~.navigator:nth-of-type(1) {
display: flex;
}

.slides input[type="radio"]:nth-of-type(2):checked~.navigator:nth-of-type(2) {
display: flex;
}

.slides input[type="radio"]:nth-of-type(3):checked~.navigator:nth-of-type(3) {
display: flex;
}

.slides input[type="radio"]:nth-of-type(4):checked~.navigator:nth-of-type(4) {
display: flex;
}

.slides input[type="radio"]:nth-of-type(5):checked~.navigator:nth-of-type(5) {
display: flex;
}


